<template>
	<scroll-view scroll-y class="page-scroll">
		<view class="setting-box">
			<view>
				<image src="/static/images/left.png" class="left-icon" @click="backToLast"></image>
			</view>
			<!-- 信息展示 -->
			<view class="top-box">
				<view>
					<image src="/static/images/logo.png" class="avatar-style" alt="avatar"></image>
					<view class="title-style">{{$t("MessageSetting")}}</view>
				</view>
			</view>
			<view style="height: 100%;background-color: #fff;">
				<view class="card-box" v-for="(item,index) in noticeList" :key="index">
					<view class="card-left">
						<view class="card-title">{{item.noticeName}}</view>
						<view class="card-describe">{{item.describe}}</view>
					</view>
					<view class="card-right">
						<up-switch v-if="index == 0" v-model="item.isOpen" activeColor="#DE868F" size="22" asyncChange
							@change="asyncChange"></up-switch>
						<up-switch v-else-if="index == 1" v-model="item.isOpen" activeColor="#DE868F" size="22"
							asyncChange @change="asyncChange1"></up-switch>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useI18n } from 'vue-i18n'
	const backToLast = () => {
		uni.navigateBack()
	}
	interface NoticeList {
		isOpen : boolean,
		noticeName : string,
		describe : string,
	}
	const { t } = useI18n()
	const noticeList = ref<NoticeList[]>([
		{
			isOpen: false,
			noticeName: t('eventNotification'),
			describe: t('describe5'),
		},
		{
			isOpen: false,
			noticeName: t('interactiveNotification'),
			describe: t('describe6'),
		}
	])
	const asyncChange = (e) => {
		uni.showModal({
			content: e ? t('sureOpen') : t('sureClose'),
			confirmText: t('confirm'),    // 从语言包获取确认按钮文本
			cancelText: t('cancel'),      // 从语言包获取取消按钮文本
			success: (res) => {
				if (res.confirm) {
					noticeList.value[0].isOpen = e;
				}
			},
		});
	}
	const asyncChange1 = (e) => {
		uni.showModal({
			content: e ? t('sureOpen') : t('sureClose'),
			success: (res) => {
				if (res.confirm) {
					noticeList.value[1].isOpen = e;
				}
			},
		});
	}
</script>

<style lang="scss" scoped>
	.page-scroll {
		height: 100%;
	}

	.setting-box {
		width: 100%;
		height: 100%;
		/*微信小程序无法使用本地资源图片作为背景图 使用base64格式*/
		background-image: url('');
		background-size: cover;
		background-repeat: no-repeat;
		box-sizing: border-box;
		padding: 2rem 0;
		/* #ifdef  MP-WEIXIN*/
		padding-top: 3.5rem;
		/* #endif*/
	}

	.left-icon {
		width: 1.5rem;
		height: 1.5rem;
		margin: -3rem 0 0 0.5rem;
		/* #ifdef  MP-WEIXIN*/
		margin: 0rem 0 0 0.5rem;
		/* #endif*/
	}

	.top-box {
		width: 100%;
		height: 11rem;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
		position: relative;
		text-align: center;
	}

	.avatar-style {
		width: 8.38rem;
		height: 8.38rem;
		border-radius: 50%;
	}

	.title-style {
		height: 1.5rem;
		line-height: 1.5rem;
		color: rgba(16, 16, 16, 0.8);
		font-size: 0.88rem;
		font-weight: 600;
		text-align: center;
		margin-bottom: 1rem;
	}

	.card-box {
		display: flex;
		margin: 0 auto;
		width: 92%;
		padding: 1rem;
		box-sizing: border-box;
		justify-content: space-between;
		// border: 0.06rem solid rgba(187, 187, 187, 1);
	}

	.card-left {
		text-align: left;
		width: 70%;
	}

	.card-title {
		font-size: 0.88rem;
		height: 1.25rem;
		line-height: 1.25rem;
		font-weight: 600;
		margin-bottom: 0.3rem;
	}

	.card-describe {
		width: 100%;
		max-height: 3.3rem;
		line-height: 1.1rem;
		color: rgba(154, 154, 154, 1);
		font-size: 0.75rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.card-right {
		display: flex;
		align-items: center;
	}
</style>